<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="./img/logo.png">
        <link rel="apple-touch-icon" href="./img/logo.png">
        <meta name="mobile-web-app-capable" content="yes" />
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
        <title>WebGL Fluid Simulation</title>
        <meta name="description" content="A WebGL fluid simulation that works in mobile browsers." />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Webgl Fluid Simulation" />
        <meta property="og:description" content="A WebGL fluid simulation that works in mobile browsers." />
        <script type="text/javascript" src="./js/dat.gui.min.js"></script>
        <style>
            * {
                user-select: none;
            }

            html,
            body {
                overflow: hidden;
                background-color: #000;
            }

            body {
                margin: 0;
                position: fixed;
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-position: center;
            }

            canvas {
                width: 100%;
                height: 100%;
            }

            #videoBackground {
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                object-fit: fill;
            }

            #overlay {
                pointer-events: none;
                position: fixed;
                width: 25%;
                height: 25%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <canvas></canvas>
        <video id="videoBackground" muted loop></video>
        <div id="overlay"></div>
    </body>
    <script src="./js/script.js"></script>
</html>